<template>
    <div>
        <HeaderTitle flagCourse="false"></HeaderTitle>
        <section class="contents">
            <div class="contents_main">
                <div class="contents_main_s1">
                    <el-tabs :tab-position="tabPosition" style="height: 200px;">
                        <el-tab-pane label="用户管理">
                            <div class="contents_main_s1_right">
                                <h3>个人信息</h3>
                                <div class="contents_main_s1_right_body">
                                    <div class="contents_main_s1_right_body_name">
                                        <h3>昵称
                                            <el-button type="text" @click="dialogVisible1 = true">修改</el-button>
                                            <el-dialog
                                                    title="修改昵称"
                                                    :visible.sync="dialogVisible1"
                                                    width="30%"
                                                    >
                                                <div style="height: 80px;border-top: 1px solid grey;border-bottom: 1px solid grey">
                                                    <input v-model="personalNickName" type="text" style="width: 100%;height: 25px;margin-top: 24px" placeholder="请输入新昵称">
                                                </div>
                                                <span slot="footer" class="dialog-footer">
                                                <el-button @click="dialogVisible1 = false">取 消</el-button>
                                                <el-button type="primary" @click="dialogVisible11">确 定</el-button>
  </span>
                                            </el-dialog>
                                        </h3>
                                        <h3>&nbsp;</h3>
                                        <h3 class="nickName">{{this.$store.state.personalName}}</h3>
                                    </div>
                                    <div class="contents_main_s1_right_body_name">
                                        <h3>手机号
                                            <el-button type="text" @click="dialogVisible2 = true">修改</el-button>
                                            <el-dialog
                                                    title="修改手机号"
                                                    :visible.sync="dialogVisible2"
                                                    width="30%"
                                            >
                                                <div style="border-top: 1px solid grey;border-bottom: 1px solid grey">
                                                    <input v-model="writeNewPhoneNumber" type="text" style="width: 100%;height: 25px;margin: 12px 0" placeholder="请输入新手机号">
                                                    <input v-model="writeNewPhoneNumberCode" type="text" style="width: 100%;height: 25px;margin: 12px 0" placeholder="请输入验证码">
                                                    <button @click="getNewPhoneNumberCode" class="getChangeYanzhengma" style="width: 102px!important;height: 33px!important; margin: 10px 0">获取验证码</button>
                                                </div>
                                                <span slot="footer" class="dialog-footer">
                                                <el-button @click="dialogVisible2 = false">取 消</el-button>
                                                <el-button type="primary" @click="dialogVisible22">确 定</el-button>
  </span>
                                            </el-dialog>
                                        </h3>
                                        <span class="mobilePhone">{{this.$store.state.personalPhone}}</span>
                                    </div>
                                    <div class="contents_main_s1_right_body_name">
                                        <h3>密码
                                            <el-button type="text" @click="dialogVisible3 = true">修改</el-button>
                                            <el-dialog
                                                    title="修改密码"
                                                    :visible.sync="dialogVisible3"
                                                    width="30%"
                                            >
                                                <div style="border-top: 1px solid grey;border-bottom: 1px solid grey">
                                                    <input v-model="getOldPassword" type="text" style="width: 100%;height: 25px;margin: 12px 0" placeholder="请输入旧密码">
                                                    <input v-model="getNewPassword" type="text" style="width: 100%;height: 25px;margin: 12px 0" placeholder="请输入新密码">
                                                    <input v-model="checkNewPassword" type="text" style="width: 100%;height: 25px;margin: 12px 0" placeholder="请输入再次输入新密码">
                                                    <input v-model="changePasswordMobile" type="text" style="width: 100%;height: 25px;margin: 12px 0" placeholder="请输入手机号">
                                                    <input v-model="changePasswordMobileCode" type="text" style="width: 50%;height: 25px;margin: 12px 0" placeholder="请输入验证码">
                                                    <button @click="getNewPasswordCode" class="getChangeYanzhengma" style="width: 102px!important;height: 31px!important; margin: 10px 30px">获取验证码</button>
                                                </div>
                                                <span slot="footer" class="dialog-footer">
                                                <el-button @click="dialogVisible3 = false">取 消</el-button>
                                                <el-button type="primary" @click="dialogVisible33">确 定</el-button>
  </span>
                                            </el-dialog>
                                        </h3>
                                        <span>******</span>
                                    </div>
                                    <div class="contents_main_s1_right_body_img">
                                        <div>
                                            <img :src="$store.state.personalHeaderImgBig" class="personalHeaderImgBig">
                                        </div>
                                        <input type="file" @change="changePersonalImg" ref="imgHeader">
                                    </div>
                                </div>

                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="配置管理">
                            <div class="contents_main_s1_right">
                                <h3>个人信息</h3>
                                <div class="contents_main_s1_right_body">
                                    <div class="contents_main_s1_right_body_name">
                                        <h3>昵称 <a href="#">修改</a></h3>
                                        <h3>&nbsp;</h3>
                                        <h3>牛</h3>
                                    </div>
                                    <div class="contents_main_s1_right_body_name">
                                        <h3>手机号 <a href="#">修改</a></h3>
                                        <span>150xxxxxxxx</span>
                                    </div>
                                    <div class="contents_main_s1_right_body_name">
                                        <h3>密码 <a href="#">修改</a></h3>
                                        <span>******</span>
                                    </div>
                                    <div class="contents_main_s1_right_body_img">
                                        <div>
                                            <img src=""
                                                 alt="">
                                        </div>
                                        <button class="contents_main_s1_right_body_img_btn">
                                            更改头像
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="角色管理">
                            <div class="contents_main_s1_right">
                                <h3>个人信息</h3>
                                <div class="contents_main_s1_right_body">
                                    <div class="contents_main_s1_right_body_name">
                                        <h3>昵称 <a href="#">修改</a></h3>
                                        <h3>&nbsp;</h3>
                                        <h3>甘</h3>
                                    </div>
                                    <div class="contents_main_s1_right_body_name">
                                        <h3>手机号 <a href="#">修改</a></h3>
                                        <span>180xxxxxxxx</span>
                                    </div>
                                    <div class="contents_main_s1_right_body_name">
                                        <h3>密码 <a href="#">修改</a></h3>
                                        <span>******</span>
                                    </div>
                                    <div class="contents_main_s1_right_body_img">
                                        <div>
                                            <img src=""
                                                 alt="">
                                        </div>
                                        <button class="contents_main_s1_right_body_img_btn">
                                            更改头像
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>

        </section>
        <foot></foot>

    </div>
</template>

<script>
    import HeaderTitle from "../../components/headerTitle";
    import foot from "../../components/foot";
    // import {personalModel} from "../../../api/login";
    import {
        changeHeaderImg,
        changePersonalName,
        changePersonalPhone, changePersonalToNewPassword,
        changePhoneNumberYanzheng, getChangePersonalToPasswordCode
    } from "../../../api/personal";

    export default {
        name: "personal",
        components: {
            HeaderTitle,
            foot
        },
        data() {
            return {
                tabPosition: 'left',
                flagCourse: false,
                dialogVisible1: false,
                dialogVisible2:false,
                dialogVisible3:false,
                personalNickName:"",
                writeNewPhoneNumber:"",
                writeNewPhoneNumberCode:"",
                getOldPassword:"",
                getNewPassword:"",
                checkNewPassword:"",
                changePasswordMobile:"",
                changePasswordMobileCode:"",


            }
        },
        methods: {
            changePersonalImg() {
                // console.log(this.$refs.imgHeader.files)
                changeHeaderImg(this.$refs.imgHeader.files[0]).then(res => {
                    console.log(res)
                })
            },
            handleClose(done) {
                done()
            },
            //修改昵称请求
            dialogVisible11(){
                changePersonalName(this.personalNickName).then(res=>{
                    console.log(res)
                })
            },
        //    获取验证码
            getNewPhoneNumberCode(){
                changePhoneNumberYanzheng(this.writeNewPhoneNumber).then(res=>{
                    console.log(res)
                })
            },
            // 修改手机号
            dialogVisible22(){
                changePersonalPhone(this.writeNewPhoneNumber,this.writeNewPhoneNumberCode).then(res=>{
                    console.log(res)
                })
            },
            //获取验证码
            getNewPasswordCode(){
                getChangePersonalToPasswordCode(this.changePasswordMobile).then(res=>{
                    console.log(res)
                })
            },
            //修改密码
            dialogVisible33(){
                changePersonalToNewPassword(this.getOldPassword,this.getNewPassword,this.checkNewPassword,this.changePasswordMobile,this.changePasswordMobileCode).then(res=>{
                    console.log(res)
                })
            }
        },
        created() {

        }
    }
</script>

<style scoped>
    .personalHeaderImgBig {
        width: 200px;
        height: 200px;
    }

    .contents {
        padding: 20px 10px;
        background-color: #f4f4f4;
    }

    .contents_main {
        margin: auto;
        padding: 20px;
        padding-left: 0;
        width: 1200px;
        background-color: #fff;
    }

    .contents_main_s1 {
        height: 723.2px;
        width: 1160px;
        display: flex;
    }

    .contents_main_s1_left {
        width: 104px;
        height: 143px;
        text-align: center;
    }

    .contents_main_s1_left > li {
        padding-top: 8px 24px;
        height: 37px;
        width: 104px;
        line-height: 37px;
    }

    .contents_main_s1_left a {
        color: #333;
        text-decoration: none;
    }

    .contents_main_s1_left a:hover {
        color: rgb(81, 190, 126);
    }

    .contents_main_s1_left_li1 {
        position: relative;
    }

    .contents_main_s1_left_line {
        width: 2px;
        height: 37px;
        background-color: #00cf8c;
        position: absolute;
        right: -2px;
    }

    /* 右半第一个 */
    .contents_main_s1_right {
        padding-left: 24px;
        width: 1058px;
        height: 723.2px;
        /*border-left: 1px solid #ccc;*/
    }

    .contents_main_s1_right h3 {
        font-size: 20px;
        font-weight: normal;
    }

    .contents_main_s1_right > h3 {
        margin: 0;
        font-size: 22px;
        font-weight: normal;
    }

    .contents_main_s1_right_body {
        padding: 40px;
        width: 1033px;
        height: 690.2px;
    }

    .contents_main_s1_right_body_name {
        padding-bottom: 20px;
        margin-bottom: 20px;
        width: 953px;
        height: 86.4px;
        border-bottom: 1px solid #bbb;
    }

    .contents_main_s1_right_body_name a {
        font-size: 14px;
        text-decoration: none;
        color: #00cf8c;
    }

    .contents_main_s1_right_body_name > span {
        display: inline-block;
        font-size: 20px;
        margin-top: 15px;
    }

    .contents_main_s1_right_body_img {
        width: 953px;
        height: 240px;
    }

    .contents_main_s1_right_body_img_btn {
        margin-top: 7px;
        width: 110px;
        height: 32px;
        border: 1px solid #ccc;
        border-radius: 2px;
        outline: none;
    }

    .contents_main_s1_right_body_img_btn:hover {
        border: 1px solid rgb(81, 190, 126);
        color: rgb(81, 190, 126);
    }

    .el-tabs {
        height: 740px !important;
    }

    /deep/ .el-tabs__active-bar {
        left: 114px !important;
    }

    /deep/ .el-tabs__content {
        padding: 30px !important;
        padding-top: 0 !important;
    }

    /deep/ .goLoginText {
        margin-left: 55px !important;
    }

    /deep/ .loginBtn {
        margin-left: 55px !important;
    }
</style>
<style scoped>
    .getChangeYanzhengma {
        width: 102px!important;
        height: 33px!important;
    }
</style>